<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>批量转账查询</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>

        tr td:nth-child(1),
        tr td:nth-child(3) {
            background-color: #E8EAED; /* 设置背景颜色 */
        }

        .layui-layout-admin {
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
        }

        .layui-layout-admin .layui-footer {
            padding: 10px 0;
            text-align: center;
            left: 0
        }
    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="form-initPlat" id="userForm" method="post"
          style="margin-bottom: 80px">
        <div class="layui-form-item">
            <label class="layui-form-label">查询内容</label>
            <div class="layui-input-inline">
                <input id="queryText" type="text" name="title" placeholder="请输入批次单单号" autocomplete="off"
                       class="layui-input">
            </div>
            <button id="btnQuery" type="button" class="layui-btn layui-btn-primary layui-border-blue">查询</button>
        </div>
        <table class="layui-table" style="border:1px solid cornsilk">
            <colgroup>
                <col width="100">
                <col width="250">
                <col width="100">
                <col width="250">
            </colgroup>
            <tbody>
            <tr>
                <td>付款人名称</td>
                <td id="paymentAccountName">无数据</td>
                <td>付款人账号</td>
                <td id="paymentCapitalAccount">无数据</td>
            </tr>
            <tr>
                <td>银行流水号</td>
                <td id="bankFlowNo">无数据</td>
                <td>交易总金额</td>
                <td id="money">无数据</td>
            </tr>
            <tr>
                <td>发起时间</td>
                <td id="initiateTime">无数据</td>
                <td>完成时间</td>
                <td id="finishTime">无数据</td>
            </tr>
            </tbody>
        </table>
        <div id="targetContainer"></div>
        <!--提交按钮-->
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <button class="layui-btn  layui-btn-normal" lay-submit="" lay-filter="close-initPlat"><i
                            class="layui-icon">&#x1006;</i>关闭
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>


<script src="../../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'form'], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, element = layui.element;
        element.render('icon');
        loadeHtml([]);
        //上传完毕 提交表单
        form.on('submit(close-initPlat)', function () {
            const index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
            parent.layer.close(index);//关闭窗口
        });


        function loadeHtml(data) {
            if(data==null||data.length<1)return;
            document.getElementById('paymentAccountName').innerHTML=data[0]['acntName'];
            document.getElementById('paymentCapitalAccount').innerHTML=data[0]['acntNo'];
            document.getElementById('bankFlowNo').innerHTML=data[0]['bankFlowNo'];
            document.getElementById('initiateTime').innerHTML=data[0]['initiateTime'];
            document.getElementById('finishTime').innerHTML=data[0]['completeTime'];
            let infoCollection = [
                {name: "收款人名称", label: "acntToName"},
                {name: "收款人账号", label: "acntToNo"},
                {name: "交易名称", label: "tradeName"},
                {name: "本地流水号", label: "tradeNo"},
                {name: "交易状态", label: "status"},
                {name: "交易金额", label: "amount"},
                {name: "备注", label: "remark"},
            ];
            // 获取目标容器元素
            const container = document.getElementById('targetContainer');
            // 定义要循环添加的次数
            // 循环添加HTML代码
            let amt=0;
            for (let i = 0; i < data.length; i++) {
                amt+=data[i]['amount'];
                // 创建<div class="layui-card">元素
                const cardDiv = document.createElement('div');
                cardDiv.className = 'layui-card';
                cardDiv.style.marginTop="15px";
                cardDiv.style.backgroundColor="#E8EAED";
                // 创建<div class="layui-card-header">元素
                const headerDiv = document.createElement('div');
                headerDiv.className = 'layui-card-header';
                headerDiv.innerText = '收款人信息' + (i + 1);
                // 创建<div class="layui-card-body">元素
                const bodyDiv = document.createElement('div');
                bodyDiv.className = 'layui-card-body';
                // 在<div class="layui-card-body">中添加给定的HTML代码
                let bodyHtml = `<div class="layui-row">`;
                for (let j = 0; j < infoCollection.length; j++) {
                    bodyHtml += `<div class="layui-col-xs6 layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">` + infoCollection[j]['name'] + `</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" value="` + data[i][infoCollection[j]['label']] + `" disabled placeholder="无数据" class="layui-input">
                        </div>
                    </div>
                </div> `;
                }
                bodyHtml += `</div> `;
                bodyDiv.innerHTML = bodyHtml;
                // 将子元素添加到父元素中
                cardDiv.appendChild(headerDiv);
                cardDiv.appendChild(bodyDiv);
                // 将<div class="layui-card">添加到目标容器中
                container.appendChild(cardDiv);
            }
            document.getElementById('money').innerHTML=String(amt);

        }


        $("#btnQuery").click(function () {
            const inputTex = document.getElementById("queryText").value;
            admin.req({
                url: "/platform/cmbc/transferQryBatchXfer",
                data: {batchTradeNo:inputTex},
                type: 'post',
                done: function (res) {
                    const data = res.data;
                    loadeHtml(data)
                }
            });
            return false;
        });

    })
    ;
</script>
</body>
</html>